<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:c="http://java.sun.com/jsp/jstl/core"
                template="/template/StakeholderTTATemplate.xhtml">

    <ui:define name="contentInsert">

        <h3><h:outputText value="Sales" /></h3>
        <br/>

        <h:form id="salesChartFrom">
            <p:panel id="sales" style="background:whitesmoke" > 
                <h:panelGrid columns="2">
                    <h:outputText value="Select Time range: " style="font-weight: bold; font-size: medium; font-family: Arial"/>
                    <p:ajaxStatus style="width:20px;height:20px;">
                        <f:facet name="start">
                            <h:graphicImage value="http://www.primefaces.org:8080/showcase/design/ajaxloading.gif" />
                        </f:facet>
                        <f:facet name="complete">
                            <h:outputText value="" />
                        </f:facet>
                    </p:ajaxStatus>
                </h:panelGrid>

                <h:panelGrid columns="6">
                    <h:selectOneMenu id="salesYearStart" value="#{spipSalesMB.salesYearStart}">
                        <f:selectItem itemLabel="Select Year" itemValue=""/>
                        <f:selectItems value="#{spipSalesMB.startYears}" />
                        <p:ajax update="salesMonthStart"   
                                listener="#{spipSalesMB.handleStartYearChange}" />
                    </h:selectOneMenu>
                    <h:selectOneMenu id="salesMonthStart" value="#{spipSalesMB.salesMonthStart}">
                        <f:selectItem itemLabel="Select Month" itemValue=""/>
                        <f:selectItems value="#{spipSalesMB.startMonths}" /> 
                    </h:selectOneMenu>
                    <h:outputText value="------------TO------------" style="text-align: center"/>
                    <h:selectOneMenu id="salesYearEnd" value="#{spipSalesMB.salesYearEnd}">
                        <f:selectItem itemLabel="Select Year" itemValue=""/>
                        <f:selectItems value="#{spipSalesMB.endYears}" />
                        <p:ajax update="salesMonthEnd"   
                                listener="#{spipSalesMB.handleEndYearChange}" />
                    </h:selectOneMenu>
                    <h:selectOneMenu id="salesMonthEnd" value="#{spipSalesMB.salesMonthEnd}">
                        <f:selectItem itemLabel="Select Month" itemValue=""/>
                        <f:selectItems value="#{spipSalesMB.endMonths}" />
                    </h:selectOneMenu>
                    <p:commandButton value="Update" actionListener="#{spipSalesMB.updateStartEnd}"
                                     update="salesChart"/>
                    <p:ajaxStatus style="width:16px;height:16px;">
                        <f:facet name="start">
                            <h:graphicImage value="http://www.primefaces.org:8080/showcase/design/ajaxloading.gif" />
                        </f:facet>
                        <f:facet name="complete">
                            <h:outputText value="" />
                        </f:facet>
                    </p:ajaxStatus>
                </h:panelGrid>
            </p:panel>
            <p:lineChart id="salesChart"
                         model="#{spipSalesMB.salesModel}"
                         titleX="Month" titleY="Sales" width="700px" height="400px">
                <p:chartSeries label="Sales" value="#{sale.revenue}"/>  
            </p:lineChart>  
            
            <br/>
            <c:if test="#{checkBIPaymentMB.checkIsPaid()}">
            <h3><h:outputText value="Sales With Prediction" /></h3>
            <br/>
            <p:panel style="background:whitesmoke">
                <h:panelGrid columns="3">

                    <h:outputText value="Predict using historical months since"/>
                    <h:selectOneMenu value="#{spipSalesMB.numHistoricalMonths}">
                        <f:selectItem itemLabel="3 months ago" itemValue="3"/>
                        <f:selectItem itemLabel="6 months ago" itemValue="6"/>
                        <f:selectItem itemLabel="1 year ago" itemValue="12"/>
                        <f:selectItem itemLabel="18 months ago" itemValue="18"/>
                        <f:selectItem itemLabel="2 year ago" itemValue="24"/>
                        <f:selectItem itemLabel="3 year ago" itemValue="36"/>
                        <f:selectItem itemLabel="The beginning of time" itemValue="100"/>
                    </h:selectOneMenu>
                    <h:outputText/>
                    <h:outputText value="Enter number of months to predict"/>
                    <h:inputText value="#{spipSalesMB.numMonthToPred}"/>
                    <p:commandButton value="Update" action="#{spipSalesMB.updatePrediction()}"
                                     update="salesPredChart,saleCorCoef"/>
                    <p:ajaxStatus style="width:16px;height:16px;">
                        <f:facet name="start">
                            <h:graphicImage value="http://www.primefaces.org:8080/showcase/design/ajaxloading.gif" />
                        </f:facet>
                        <f:facet name="complete">
                            <h:outputText value="" />
                        </f:facet>
                    </p:ajaxStatus>
                </h:panelGrid>
                <h:panelGrid columns="2">
                    <h:outputText value="Correlation Coefficient:"/>
                    <h:outputText id="saleCorCoef" value="#{spipSalesMB.saleCorCoefStr}"/>
                </h:panelGrid>
            </p:panel>
            <p:lineChart id="salesPredChart"
                         model="#{spipSalesMB.salesWithPredModel}"
                         titleX="Month" titleY="Sales" width="700px" height="400px"/>
            </c:if>
        </h:form>
        <h3><h:outputText value="Reservations" /></h3>
        <br/>
        <h:form id="reservationChartFrom">
            <p:panel style="background:whitesmoke">
                <h:panelGrid columns="2">
                    <h:outputText value="Select Time range: " style="font-weight: bold; font-size: medium; font-family: Arial"/>
                    <p:ajaxStatus style="width:20px;height:20px;">
                        <f:facet name="start">
                            <h:graphicImage value="http://www.primefaces.org:8080/showcase/design/ajaxloading.gif" />
                        </f:facet>
                        <f:facet name="complete">
                            <h:outputText value="" />
                        </f:facet>
                    </p:ajaxStatus>
                </h:panelGrid>
                <h:panelGrid columns ="6">
                    <h:selectOneMenu id="rYearStart" value="#{spipReservationMB.reservationsYearStart}">
                        <f:selectItem itemLabel="Select Year" itemValue=""/>
                        <f:selectItems value="#{spipReservationMB.startYears}" />
                        <p:ajax update="rMonthStart"   
                                listener="#{spipReservationMB.handleStartYearChange}" />
                    </h:selectOneMenu>
                    <h:selectOneMenu id="rMonthStart" value="#{spipReservationMB.reservationsMonthStart}">
                        <f:selectItem itemLabel="Select Month" itemValue=""/>
                        <f:selectItems value="#{spipReservationMB.startMonths}" /> 
                    </h:selectOneMenu>
                    <h:outputText value="------------TO------------" style="text-align: center"/>
                    <h:selectOneMenu id="rYearEnd" value="#{spipReservationMB.reservationsYearEnd}">
                        <f:selectItem itemLabel="Select Year" itemValue=""/>
                        <f:selectItems value="#{spipReservationMB.endYears}" />
                        <p:ajax update="rMonthEnd"   
                                listener="#{spipReservationMB.handleEndYearChange}" />
                    </h:selectOneMenu>
                    <h:selectOneMenu id="rMonthEnd" value="#{spipReservationMB.reservationsMonthEnd}">
                        <f:selectItem itemLabel="Select Month" itemValue=""/>
                        <f:selectItems value="#{spipReservationMB.endMonths}" />
                    </h:selectOneMenu>
                    <p:commandButton value="Update" actionListener="#{spipReservationMB.updateStartEnd}"
                                     update="reservationsChart"/>
                    <p:ajaxStatus style="width:16px;height:16px;">
                        <f:facet name="start">
                            <h:graphicImage value="http://www.primefaces.org:8080/showcase/design/ajaxloading.gif" />
                        </f:facet>
                        <f:facet name="complete">
                            <h:outputText value="" />
                        </f:facet>
                    </p:ajaxStatus>
                </h:panelGrid>
            </p:panel>
            <p:lineChart id="reservationsChart"
                         model="#{spipReservationMB.reservationModel}"
                         titleX="Month" titleY="Reservations" width="700px" height="400px" />

            <br/>
            <c:if test="#{checkBIPaymentMB.checkIsPaid()}">
            <h3><h:outputText value="Reservation With Prediction" /></h3>
            <br/>
            <p:panel style="background:whitesmoke">

                <h:panelGrid columns="3">
                    <h:outputText value="Predict using historical months since"/>
                    <h:selectOneMenu value="#{spipReservationMB.numHistoricalMonths}">
                        <f:selectItem itemLabel="3 months ago" itemValue="3"/>
                        <f:selectItem itemLabel="6 months ago" itemValue="6"/>
                        <f:selectItem itemLabel="1 year ago" itemValue="12"/>
                        <f:selectItem itemLabel="18 months ago" itemValue="18"/>
                        <f:selectItem itemLabel="2 year ago" itemValue="24"/>
                        <f:selectItem itemLabel="3 year ago" itemValue="36"/>
                        <f:selectItem itemLabel="The beginning of time" itemValue="100"/>
                    </h:selectOneMenu>
                    <h:outputText/>
                    <h:outputText value="Enter number of months to predict"/>
                    <h:inputText value="#{spipReservationMB.numMonthToPred}"/>
                    <p:commandButton value="Update" actionListener="#{spipReservationMB.updatePrediction()}"
                                     update="reservationsPredChart,resCorCoef"/>
                    <p:ajaxStatus style="width:16px;height:16px;">
                        <f:facet name="start">
                            <h:graphicImage value="http://www.primefaces.org:8080/showcase/design/ajaxloading.gif" />
                        </f:facet>
                        <f:facet name="complete">
                            <h:outputText value="" />
                        </f:facet>
                    </p:ajaxStatus>
                </h:panelGrid>
                <h:panelGrid columns="2">
                    <h:outputText value="Correlation Coefficient:"/>
                    <h:outputText id="resCorCoef" value="#{spipReservationMB.resCorCoefStr}"/>
                </h:panelGrid>
            </p:panel>
            <p:lineChart id="reservationsPredChart"
                         model="#{spipReservationMB.reservationWithPredModel}" 
                         titleX="Month" titleY="Reservations" width="700px" height="400px" />
            </c:if>
        </h:form>

    </ui:define>

</ui:composition>
